<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script
      type="text/javascript"
      src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=CPxHyHH5XD8mUnmRPbv9BehycOEklp34"
    ></script>
    <!-- 初始化地图 -->
    <script src="../js/initMap.js"></script>
    <!-- 主题 -->
    <script src="../js/theme.js"></script>
    <!-- 建筑坐标 -->
    <script src="./buildCoordinate.js"></script>
    <!-- 通过城市名称获取坐标 -->
    <script src="https://mapv.baidu.com/build/mapv.js"></script>
    <script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.54/dist/mapvgl.min.js"></script>
    <title>shape</title>
    <style type="text/css">
      html,
      body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map_container {
        width: 100%;
        height: 100%;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <div id="map_container"></div>
  </body>
  <script type="text/javascript">
    // 初始化
    const map = initMap({
      tilt: 80,
      heading: -45.3,
      center: [106.540547, 29.564858], // 重庆
      zoom: 16,
    });
    initData();
    function initData() {
      const polygons = []; // 二维数组 所有多边形的面
      // shapeDatas 索引0代表建筑高度 之后代表坐标系
      for (let i = 0; i < shapeDatas.length; i++) {
        const build = shapeDatas[i]; // 每个建筑物信息（二维数组中的数组）
        const polygon = []; // 多边形的数据
        // 官方提供：转换墨卡托坐标算法 索引1、2代表经度和纬度
        let pt = [build[1] * 512, build[2] * 512];
        // 索引3开始代表建筑信息
        // += 2 代表坐标系两个一组
        for (let j = 3; j < build.length; j += 2) {
          pt[0] += build[j] / 100 / 2; // 维度 11,862,016
          pt[1] += build[j + 1] / 100 / 2; // 经度
          polygon.push([pt[0], pt[1]]);
        }
        polygons.push({
          geometry: {
            type: "Polygon", // 莫拉托坐标 - 投影
            coordinates: [polygon], // 三维数组
          },
          properties: {
            height: build[0], // 多边形高度
          },
        });
      }
      setData(polygons);
    }
    function setData(data) {
      const view = new mapvgl.View({ map });
      const shaperLayer = new mapvgl.ShapeLayer({
        color: "blue",
        style: "windowAnimation", // 动画 默认normal
        opacity: 0.3, // 透明度
        riseTime: 2000, // 楼房升起动画
        enablePicked: true, // 是否可以选中 鼠标点击效果
        selectedIndex: -1, // 选中项
        selectedColor: "yellow", // 选中项颜色
        autoSelect: true, // 根据鼠标位置来自动设置选中项
        onClick: (data) => console.log(data), // 点击事件
      });
      view.addLayer(shaperLayer);
      shaperLayer.setData(data);
    }
  </script>
</html>
